<template>
  <el-row
    class="row-bg"
    justify="center"
    :gutter="24"
    style="margin-left: 0px; margin-right: 0px"
  >
    <el-col :sm="6" :md="8"
      ><div class="grid-content bg-purple" />
      <p style="font-size: 2rem">欢迎来到VueAdmin管理系统</p>
      <div>
        <img
          src="../../../assets/logo.png"
          style="height: 180px; width: 180px"
        />
      </div>
      <p style="font-size: 2rem">相恨不如潮有信，相思始觉海非深。</p>
      <p style="font-size: 2rem">--浪淘沙·借问江潮与海水</p>
    </el-col>
    <el-col :sm="1" :md="2">
      <div class="grid-content bg-purple-light" />
      <el-divider direction="vertical" />
    </el-col>
    <el-col :sm="6" :md="8">
      <div class="grid-content bg-purple-light" />

      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        style="width: 450px"
      >
        <el-form-item label="用户名" prop="userName">
          <el-input
            v-model="ruleForm.userName"
            type="userNameword"
            autocomplete="off"
            style="width: 300px; height: 40px"
          />
        </el-form-item>
        <el-form-item label="密码" prop="userNameWord">
          <el-input
            v-model="ruleForm.userNameWord"
            type="userNameword"
            autocomplete="off"
            style="width: 300px; height: 40px"
          />
        </el-form-item>
        <el-form-item label="验证码" prop="checkCode">
          <el-input
            v-model.number="ruleForm.checkCode"
            style="width: 170px; height: 40px"
          />
          <img
            :src="url"
            style="
              width: 120px;
              height: 40px;
              margin-left: 8px;
              border-radius: 5px;
            "
            v-on:click="getImg"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)"
            >提交</el-button
          >
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, onMounted } from "vue";
import type { FormInstance } from "element-plus";
import { getCaptchaImg, login } from "../../../axios/index";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

export default defineComponent({
  name: "Login",

  setup() {
    const ruleFormRef = ref<FormInstance>();
    let url = ref("");
    const store = useStore();
    const router = useRouter();

    const getImg = async () => {
      const { data } = await getCaptchaImg();
      url.value = data.data.captchaImg;
      ruleForm.token = data.data.token;
    };

    onMounted(() => {
      getImg();
    });

    const checkcheckCode = (rule: any, value: any, callback: any) => {
      if (!value) {
        return callback(new Error("请输入验证码"));
      }
      callback();
    };

    const validateuserName = (rule: any, value: any, callback: any) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else {
        if (ruleForm.userNameWord !== "") {
          if (!ruleFormRef.value) return;
          ruleFormRef.value.validateField("userNameWord", () => null);
        }
        callback();
      }
    };
    const validateuserName2 = (rule: any, value: any, callback: any) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      }
      callback();
    };
    const ruleForm = reactive({
      userName: "",
      userNameWord: "",
      checkCode: "",
      token: "",
    });

    const rules = reactive({
      userName: [{ validator: validateuserName, trigger: "blur" }],
      userNameWord: [{ validator: validateuserName2, trigger: "blur" }],
      checkCode: [{ validator: checkcheckCode, trigger: "blur" }],
    });

    const submitForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      formEl.validate(async (valid) => {
        if (valid) {
          const data = await login(ruleForm);
          const jwt = data.headers["authorization"];
          store.commit("login/SET_TOKEN", jwt);
          console.log(data);
          router.push("/index");
        } else {
          console.log("error submit!");
          return false;
        }
      });
    };

    const resetForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      formEl.resetFields();
    };

    return {
      ruleFormRef,
      checkcheckCode,
      validateuserName,
      validateuserName2,
      ruleForm,
      rules,
      submitForm,
      resetForm,
      url,
      getImg,
    };
  },
});
</script>

<style scoped lang="less">
.el-row {
  background-color: #fafafa;
  height: 100%;
  align-content: center;
  text-align: center;

  .el-divider {
    height: 20em;
  }

  .el-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
</style>